<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="javax.servlet.http.HttpServletRequest"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>投保车辆</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<!-- 添加到桌面快捷方式小图标 -->
<link rel="apple-touch-icon-precomposed" href="#">
<!-- 指定快捷方式标题 -->
<meta name="apple-mobile-web-app-title" content="志惠科技">
	<script src="${ctx}/js/jquery-1.9.1.min.js"></script>
	<script src="${ctx}/js/information_check.js"></script>
	<script src="${ctx}/js/auto_insurance.js"></script>
	<link rel="stylesheet" href="${ctx}/css/reset.css">
	<link rel="stylesheet" href="${ctx}/css/auto_insurance.css">
</head>
<style>
	#verify_content + span {position: absolute;right: 3%;top: 15%;}
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
    	-webkit-appearance: none !important;
    	margin: 0;
	}
	.car_user_name::-webkit-input-placeholder{
		color:red;
	}
	.licenseNo::-webkit-input-placeholder{
		color:red;
	}
	.car_user_phone::-webkit-input-placeholder{
		color:red;
	}
	.verify_content::-webkit-input-placeholder{
		color:red;
	}
</style>
<body class="body_bg">
	<header class="car_top">
			<a href="javascript:history.go(-1);">返回</a>投保车辆信息</header>
<form id="submitForm" action="${ctx}/carInsurance/premiumCalculate" method="post"> 
	<div class="index_head"><img src="${ctx}/images/img_index_head.jpg"/></div>
	<ul class="index_list">
		<li><em><i>*</i>车主姓名</em><input id="carOwnerName"  type="text" value="周涛" onfocus="onfocusName()" placeholder="请输入车主姓名" /></li>
		<li><em><i>*</i>身份证号码</em><input id="identifyNumber"  type="text" value="150403199301301013" onfocus="onfocusIdentifyNumber()" placeholder="请输入身份证号" /></li>
		<!-- <li class="clearfix"><em><i>*</i>关系人标志</em>
			<p class="fr">
				<span class="radiobox"><em class="radio_no"></em></span><label>投保人</label>
				<span class="radiobox"><em class="radio_no"></em></span><label>被保险人</label></span><br />
				<span class="radiobox"><em class="radio_no"></em></span><label>连带被保险人</label></span>
				<span class="radiobox"><em class="radio_no"></em></span><label>受益人</label></span>
			</p>
		</li> -->
		<li><em><i>*</i>车牌号码</em><input id="licenseNo"  type="text" value="京P7BT52" onfocus="onfocusLicenseNo()" placeholder="如沪123543"/></li>
		<li><em><i>*</i>新旧车标志</em>
		
		<p class="radiobox"><input name="carNewOldFlag" type="radio" value="N" class="radio_no"/>新车&nbsp;</p>
		<p class="radiobox"><input name="carNewOldFlag" type="radio" value="O" class="radio_no" id="unnew"/>旧车</p>
		
		</li> 
		<li><em><i>*</i>发动机号</em><input id="engineNo"  type="text" value="FDBH03736" onfocus="onfocusEngine()" placeholder="请输入发动机号" /></li>
		<li><em><i>*</i>车架号</em><input id="frameNo"  type="text" value="LVVDB12AXBD327045" onfocus="onfocusFrame()" placeholder="请输入车架号" /></li>
		<li><em>已行驶里程</em><input id="runMiles"  type="text" placeholder="输入里程保费计算优惠" /></li></ul>
		<ul class="index_list">
			<li><em><i>*</i>手机号码</em><input id="mobile" type="text" value="13702131211" onfocus="onfocusPhone()" placeholder="请输入您的手机号" /></li>
			<li style="position: relative;"><em><i>*</i>验证码</em><input id="verify_content" onfocus="onfucusVerify()" type="text" placeholder="输入手机验证码"/>
			<span><button style="background: #FFF;color:#ff6000; width:100%;" id="btnSendCode" onclick="getVerify()">获取验证码</button></span></li>
		</ul>
	</ul>
	<input type="hidden" id="openId" value="${openId}"/>
	<input type="hidden" id="verifycon" value="${openId}"/>
	<a href="#" class="policy_details_btn" onclick="toSubmit()">确定</a>
</form>
	<!--弹层开始-->
	<div class="lazy_zhezhaoceng" style="display: none;"></div>
	<div class="lazy_top" style="display: none;">
		<ul class="clearfix">
			<li class="dot1"></li>
			<li class="dot2"></li>
			<li class="dot3"></li>
			<li class="dot4"></li>
			<li class="dot5"></li>
		</ul>
		<em>提交中，请稍等……</em>
	</div>
	<div class="index_top_fix" style="display: none;"></div><!-- 遮罩层 -->
	<div class="index_top_container" style="display: none;">
		<!-- <h1>请选择您爱车的具体型号</h1>
		<p class="clearfix"><input type="radio" name="carKind" value="1" id="kind1" checked="checked"/><label for="kind1">一汽大众速腾1.6L 2004款</label><i class="fr">128000元</i></p>
		<p class="clearfix"><input type="radio" name="carKind" value="2" id="kind2"/><label for="kind2">一汽大众速腾1.6L 2004款</label><i class="fr">128000元</i></p>
		<p class="clearfix"><input type="radio" name="carKind" value="3" id="kind3"/><label for="kind3">一汽大众速腾1.6L 2004款</label><i class="fr">128000元</i></p> 原有样式
		<div class="index_top_btn clearfix" id="rerry">
			<span class="fl">没有找到</span>
			<span class="fr" id='submit'>提交</span>
		</div> -->
	</div>
	<!--弹层结束-->
</body>
<script type="text/javascript">
function toSubmit(){
	//一系列验证
	
 	if(checkName()&&checkIdNo()&&checkLicenseNo()&&checkEngineNo()&&checkFrameNo()&&checkPhone()){
		$.ajax({
			url:"${ctx}/carInsurance/checkVerify",
			data:{"phoneNumber":$('#mobile').val(),"verifyCode":$('#verify_content').val()},
			type:"post",
			dataType:"json",
			success:function(data){
				var verify=$.parseJSON(data).code; 
				if(verify!=200){
					submit();
				}else{
					$("#verify_content").val("");
					$("#verify_content").attr("class","verify_content");
					$("#verify_content").attr("placeholder","验证码错误");
					return;
				}
			}
		});
	} 
	submit();
}
//提交信息
function submit(){
//	调取弹层
	$(".lazy_zhezhaoceng,.lazy_top").show();
	$(".index_top_fix").show();
	var param = {
		"carOwnerName":$('#carOwnerName').val(),
		"identifyNumber":$('#identifyNumber').val(),
		"licenseNo":$('#licenseNo').val(),
		"mobile":$('#mobile').val(),
		"verify_content":$('#verify_content').val(),
		"carNewOldFlag":$("input[name='carNewOldFlag'][type='radio']:checked").val(),
		"engineNo":$('#engineNo').val(),
		"frameNo":$('#frameNo').val(),
		"runMiles":$('#runMiles').val(),
		"glassType":$("input[name='glassType'][type='radio']:checked").val(),
		"openId":$('#openId').val()
	};
	$.ajax({
		url:"${ctx}/carInsurance/getCarModelInfo",
		data:param,
		type:"post",
		dataType:"json",
		success:function(data){
			$(".lazy_zhezhaoceng,.lazy_top").hide();
			$('.index_top_container').show();
			var data1=$.parseJSON(data);
			if(data1==null||data1==""){
				var html ="<h1>抱歉！没有查询到您爱车的信息</h1>";
				var foot = "<div class='index_top_btn clearfix'><span class='fr' id='cancel'><a href='#' style='text-decoration:none;color:#FFFFFF'>重新提交</a></span></div>";
				html = html+foot;
				$('.index_top_container').html(html);
				$(document).ready(function(){
					$('#cancel').click(function(){
						$('.index_top_fix,.index_top_container').hide();
					}); 
				});
			}else{ 
				var html = "<div class='index_top_fix' style='display: none;'></div><!--遮罩层--><h1>请选择您爱车的具体型号</h1>";
				for(var i=0; i<data1.length; i++){
					if(i==0){
						html = html + "<p class='clearfix'><input type='radio' name='choose' value='"+i+"' id='kind1' checked='checked'/><label for='kind1'>"+data1[i].carBrand+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+data1[i].carYear+"款</label><i class='fr'>"+data1[i].purchasePrice+"元</i></p>";
					}else{
						html = html + "<p class='clearfix'><input type='radio' name='choose' value='"+i+"' id='kind1'/><label for='kind1'>"+data1[i].carBrand+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+data1[i].carYear+"款</label><i class='fr'>"+data1[i].purchasePrice+"元</i></p>";
					}
				}
				var foot = "<div class='index_top_btn clearfix'><span class='fr' id='submit'><a href='#' style='text-decoration:none;color:#FFFFFF'>提交</a></span></div>";
				html = html+foot;
				$('.index_top_container').html(html);
				$(document).ready(function(){
					$('#nofind').click(function(){
						$('.index_top_fix,.index_top_container').hide();
					});
					$('#submit').click(function(){
						var choose = $("input[name='choose'][type='radio']:checked").val();
						var carModelId=data1[0].id;
						$(".lazy_top,.lazy_zhezhaoceng").show();
						window.location.href="${ctx}/carInsurance/premiumJump?choose="+choose;
					}); 
				});
			}  
		},
		error:function(data){
		}
		
	});
		
}

//倒计时
var curCount=60;
var InterValObj;
//验证码提交
function getVerify(){
	if(!checkPhone()){
		return;
	}
	$.ajax({
		url:"${ctx}/carInsurance/getVe",
		data:{"phoneNumber":$('#mobile').val()},
		type:"post",
		dataType:"json",
		success:function(data){}
		
	});
		$("#verify_content").val("").focus();
		// 设置button效果，开始计时
		$("#btnSendCode").attr("disabled", "true");
		$("#btnSendCode").css({"background":"#dbdbdb","color":"#fff"}).parent().css("background","#dbdbdb");
		$("#btnSendCode").html("重新发送("+curCount+")");
		InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次
}
//timer处理函数
function SetRemainTime() {
	if (curCount == 0) {                
		window.clearInterval(InterValObj);// 停止计时器
		$("#btnSendCode").removeAttr("disabled");// 启用按钮
		$("#btnSendCode").css({"background":"#fff","color":"#ff6000"}).parent().css("background","#fff");
		$("#btnSendCode").html("获取验证码");
		curCount=60;
	}else {
		curCount--;
		$("#btnSendCode").css({"background":"#dbdbdb","color":"#fff"}).parent().css("background","#dbdbdb");
		$("#btnSendCode").html("重新发送("+curCount+")");
	}
}
$(function() {
	$("#unnew").attr("class","radio_yes");
	$(".radiobox").click(function() {
	$(this).find('.radio_no').attr('class', 'radio_yes');
	$(this).siblings().find('.radio_yes').attr('class', 'radio_no');
	});
	
	
});

</script>
</html>